{% if site.search %}
<div class="search-wrapper">
    <div class="search-form">
        <input type="text" id="search-input" class="search-field" placeholder="Search...">
        <i id="search-close" class="fa fa-times-circle"></i>
        <h4>Search results</h4>
        <ul id="results-container" class="search-results post-list">
        </ul>
        <!-- /.search-results -->
    </div>
    <!-- /.search-form -->
</div>
<!-- ./search-wrapper -->
{% endif %}

<div id="fade"></div>
<a id="slide" class="animated fade"></a>
<aside id="sidebar">
    <nav id="navigation">
        <h2>MENU</h2>
        <hr>
        <ul> {% for link in site.links %}
            <li>{% if link.external %}
                <a href="{{ link.url }}">{{ link.title }}</a> {% else %}
                <a href="{{ link.url }}">{{ link.title }}</a> {% endif %} </li>
            {% endfor %}
            <li><a href="/feed.xml" title="Atom/RSS feed"><i class="fa fa-rss"></i> Feed</a></li>
        </ul>
    </nav>
</aside>

{% if page.imagefeature %}
<header id="masthead" class="blog-background overlay align-center align-middle animated from-bottom" style="background-image: url(/images/{{ page.imagefeature }})"
    itemscope itemtype="http://schema.org/Organization">
    {% if page.imagecredit %}
    <span class="image-credit">Photo Credit: <a href="{{ page.imagecreditlink }}" target="_blank"> {{ page.imagecredit }}</a></span>
    {% endif %}
{% else %}
<header id="masthead" class="blog-background overlay align-center align-middle animated from-bottom" style="background-image: url(/images/{{ site.default_bg }})"
    itemscope itemtype="http://schema.org/Organization">
{% endif %}

{% if site.search %}
    <button class="menu-button animated fade dosearch">
        <i class="fa fa-search"></i>
    </button> 
{% endif %} 

{% if page.headline %}
    <div class="inner">
        <div class="container">
            <a class="brand light" href="/" itemprop="url">
                {% if site.logo %}<img itemprop="logo" src="/images/{{ site.logo }}" alt="{{ site.title }} Logo" />{% endif %}
                <h1 class="blog-title light" itemprop="name">
                    {{ site.title }}
                </h1>
            </a>

            <h2 class="blog-description light bordered bordered-top" itemprop="description">
                {{ page.headline }}
            </h2>
        </div>
    </div>
{% else %}
    <div class="inner">
        <div class="container">
            <a class="brand" href="/" itemprop="url">
                {% if site.logo %}<img itemprop="logo" src="/images/{{ site.logo }}" alt="{{ site.title }} Logo" />{% endif %}
                <h1 class="blog-title light" itemprop="name">
                    {{ site.title }}
                </h1>
            </a>
        </div>
    </div>
{% endif %}

{% if site.animated_fins and site.triangleheader %}
    <div class="decor-wrapper">
        <svg id="header-decor" class="decor bottom" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path class="large left" d="M0 0 L50 50 L0 100" fill="rgba({{ site.fin_color }}, .1)"></path>
            <path class="large right" d="M100 0 L50 50 L100 100" fill="rgba({{ site.fin_color }}, .1)"></path>
            <path class="medium left" d="M0 100 L50 50 L0 33.3" fill="rgba({{ site.fin_color }}, .3)"></path>
            <path class="medium right" d="M100 100 L50 50 L100 33.3" fill="rgba({{ site.fin_color }}, .3)"></path>
            <path class="small left" d="M0 100 L50 50 L0 66.6" fill="rgba({{ site.fin_color }}, .5)"></path>
            <path class="small right" d="M100 100 L50 50 L100 66.6" fill="rgba({{ site.fin_color }}, .5)"></path>
            <path d="M0 99.9 L50 49.9 L100 99.9 L0 99.9" fill="rgba(255,255,255, 1)"></path>
            <path d="M48 52 L50 49 L52 52 L48 52" fill="rgba(255,255,255, 1)"></path>
        </svg>
    </div>
{% else %} 
    {% if site.triangleheader %}
    <div class="decor-wrapper">
        <svg id="header-decor" class="decor bottom" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M0 99.9 L50 49.9 L100 99.9 L0 99.9" fill="rgba(255,255,255, 1)"></path>
            <path d="M48 52 L50 49 L52 52 L48 52" fill="rgba(255,255,255, 1)"></path>
        </svg>
    </div>
    {% endif %}
{% endif %}
</header>